<template>
  <div class="login">
    <div class="content">
      <img
        src="https://img.zcool.cn/community/0193dc5b9a0366a8012099c8281b5d.jpg@1280w_1l_2o_100sh.jpg"
        class="logo"
      />
      <h3>信息维护人员管理系统</h3>
      <p>Information Maintenance Personnel Management</p>
      <div class="logo_form">
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          status-icon
          :rules="rules"
          label-width="120px"
          class="demo-ruleForm"
          size="large"
        >
          <el-form-item prop="username">
            <el-input
              v-model="ruleForm.username"
              autocomplete="new-username"
              placeholder="请输入用户名称"
              :clearable="true"
              :prefix-icon="User"
            />
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="ruleForm.password"
              type="password"
              autocomplete="new-password"
              :show-password="true"
              placeholder="请输入登录密码"
              :prefix-icon="Unlock"
            />
          </el-form-item>
          <div class="huakuai">
            <Huakuai @statusChange="change_succeed" />
          </div>
          <div class="password_msg">
            <div class="remember_password">
              <el-checkbox v-model="remember_password" size="large" />
              <div><span class="remember_password_span">记住密码</span></div>
            </div>
            <a href="/forgot" class="forgot_password">忘记密码</a>
          </div>
          <el-form-item>
            <el-button
              type="primary"
              @click="submitForm(ruleFormRef)"
              class="submit_login"
            >
              登录
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="footer">CopyRight @ 优品汇 2015 - 2017</div>
  </div>
</template>

<script setup lang="ts">
import { User, Unlock } from '@element-plus/icons-vue';
import { useRouter } from 'vue-router';
const router = useRouter();
let axios: any = inject('$axios');
import {
  getCustomLocalStorage,
  setCustomLocalStorage,
  removeLocalStorage,
} from '@/utils/localStorage';

const ruleFormRef = ref<FormInstance>();
// 记住密码的开关
const remember_password = ref(false);
// 成功开关
const is_change_succeed = ref(false);
// 滑块认证成功
const change_succeed = (bold: boolean) => {
  is_change_succeed.value = bold;
};

const ruleForm = reactive({
  username: '',
  password: '',
});
const rules = reactive<FormRules<typeof ruleForm>>({
  username: [
    {
      validator: (rule: any, value: any, callback: any) => {
        if (!value) return callback(new Error('请输入用户名称'));
        callback();
      },
      trigger: 'blur',
    },
  ],
  password: [
    {
      validator: (rule: any, value: any, callback: any) => {
        if (!value) return callback(new Error('请输入登录密码'));
        callback();
      },
      trigger: 'blur',
    },
  ],
});

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate(async (valid) => {
    if (valid) {
      if (!is_change_succeed.value) {
        ElMessage({
          message: '请先拖动滑块进行验证',
          type: 'warning',
        });
        return;
      }
      let res = await axios.getLogin({
        account: ruleForm.username,
        password: ruleForm.password,
      });
      if (res.data.code != 200) {
        ElMessage({
          message: res.data.message,
          type: 'error',
        });
        return;
      }
      ElMessage({
        message: '登陆成功',
        type: 'success',
      });
      setCustomLocalStorage('token', res.data.data.token);
      setCustomLocalStorage('userInfo', JSON.stringify(res.data.data));
      if (remember_password.value) {
        // 记住密码被勾选
        setCustomLocalStorage('username', ruleForm.username);
        setCustomLocalStorage('password', ruleForm.password);
        setCustomLocalStorage('rememberMe', remember_password.value);
      } else {
        // 记住密码取消勾选
        // 否则移除
        removeLocalStorage('username');
        removeLocalStorage('password');
        removeLocalStorage('rememberMe');
      }
      router.push('/');
    } else {
      return false;
    }
  });
};
const init = () => {
  remember_password.value = Boolean(getCustomLocalStorage('rememberMe'));
  ruleForm.username = getCustomLocalStorage('username') || '';
  ruleForm.password = getCustomLocalStorage('password') || '';
};
init();
</script>

<style lang="scss" scoped>
.login {
  width: 100vw;
  height: 100vh;
  background: url('../assets/images/login/bg.png') no-repeat;
  background-size: 100% 100%;
  @include flex_cc();
  position: relative;
  .content {
    width: 550px;
    height: 520px;
    padding: 20px 50px;
    background: #fff;
    text-align: center;
    box-sizing: border-box;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.14901960784313725);
    border-radius: 5px;
    .logo {
      width: 100px;
    }

    h3 {
      @include font(#0079fe, 30, 42);
      font-weight: 650;
      margin-top: 20px;
      font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC',
        sans-serif;
      letter-spacing: 2px;
    }

    p {
      @include font(#0079fe, 14, 42);
      font-weight: 400;
    }
    .logo_form {
      margin-top: 20px;
    }
    .submit_login {
      width: 100%;
    }
    .huakuai {
      width: 100%;
      height: 40px;
      overflow: hidden;
    }
    .password_msg {
      // margin: 10px 0;
      @include flex_sc();
      .remember_password {
        display: flex;
        .remember_password_span {
          display: inline-block;
          @include font(#333, 12, 40);
          margin-left: 5px;
        }
      }
      .forgot_password {
        @include font(#409eff, 13, 40);
      }
    }
  }
  .footer {
    position: absolute;
    bottom: 40px;
    font-size: 11px;
    color: rgb(204, 204, 204);
    margin-top: 10px;
  }
}
:deep(.el-form-item__content) {
  margin-left: 0 !important;
}
:deep(.el-form-item__content) {
  position: relative;
  .left_msg_img {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1;
    width: 20px;
    height: 20px;
    object-fit: contain;
  }
  .el-input__inner {
    padding-left: 15px;
  }
  .el-input__prefix {
    font-size: 20px;
  }
}
</style>
